<table id="records" class="mFinoList">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

<!-- some variable -->
<script type="text/javascript">
var getMfinoList   = "<?=base_url()?>index.php/master/getMfino",
    updateUrlRegistered,
    delUrlRegistered,
    delHref,
    updateHref,
    updateId;

$( document ).ready( function() {
	
   readOutletsRegistered(); //panggil fungsi readOutletsRegistered

}); //end document ready

function readOutletsRegistered()
{
    
    $('.mFinoList').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": getMfinoList, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "mfino_id", "sTitle": "MFINO ID", "searchable": false}, 
                    {"mDataProp": "eload_number", "sTitle": "Eload Number"}, 
                    {"mDataProp": "regional", "sTitle": "Regional"}
                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                //     $(nRow).find('td').eq(-1).after('<a href="'+updateUrlRegistered+'/'+aaData[0]+'">Edit</a> | <a href="'+delUrlRegistered+'/'+aaData[0]+'">Delete</a>'); //buat link action 
                //     $(nRow).find('td').eq(3).each(function(){
                //         $(this).html('<a href="<?=base_url();?>'+aaData[3]+'" target="_blank">click to see the image</a>');
                //     });
                    return nRow;
                }
    });
    // $('.registeredRecord thead tr').find('th').eq(-1).after('<th class="ui-state-default" width="200px">Action</th>');
}

</script>